<template>
	<view class="new_fllow">
		<view class="fllow_form">
			<view style="width: 100px;"><text>*</text>原卡</view>
			<view class="form_input">
				<input type="text" v-model="memberCardInfo" @blur="changeInfo"
					placeholder-style="font-size:30rpx;color: #999;"  placeholder="请选择" readonly="readonly">
			</view>
			<view class="form_right" @click="showMemberCards" style="padding-top: 10px;">
				<image style="width: 40rpx;height: 40rpx;
				margin: 0px" :src="BASE_IMG_URL+'chachong.png'" mode="scaleToFill"></image>
			</view> 
		</view>
		
		<view class="fllow_form">
			<view style="width: 100px;">储值存入</view>
			<view class="form_input">
				<input v-model="rechargeAmount" @blur="changeInfo" placeholder="请输入储值额"
					placeholder-style="font-size:30rpx;color: #999;" type="number">
			</view>
		</view>
		<view class="fllow_form">
			<view style="width: 100px;">赠送存入</view>
			<view class="form_input">
				<input v-model="giveAmount" @blur="changeInfo" placeholder="请输入赠送额"
					placeholder-style="font-size:30rpx;color: #999;" type="number">
			</view>
		</view>
		<view class="fllow_form">
			<view>充入品项</view>
			<view class="form_right theme">
				<view> </view>
				<view @click="showGoods" class="iconfont icon-arrows_right"></view>
			</view>
		</view>
			<view class="fllow_item" v-for="(item,index) in cartGoods" :key="index">
				<view class="item_content">
					<view class="con_img">
						<image :src="BASE_IMG_URL+ 'defgoods.png'" class="headerimg"  mode="scaleToFill"></image>
						<view class="main_first">
							<view class="main_title">
								<view class="first_left">
									<view>{{item.goods_name}}</view> 
								</view>
								<u-icon class="u-icon" name="close" size="40" @click="deleteGoods(item.id)" ></u-icon>
							</view>
							
							<view class="main_title" style="margin-top: 10px;">
								<view class="fontColor" style="width: 180px;">总数：<input type="number" v-model="item.count" 
								placeholder-style="font-size:30rpx;color: #999;" style="width: 80px;display: inline-flex;"></view>
							</view>
							<view class="main_title" style="margin-top: 10px;">
								<view class="fontColor" style="width: 180px;">单价：￥<input type="number" v-model="item.price" 
								placeholder-style="font-size:30rpx;color: #999;" style="width: 80px;display: inline-flex;"></view>
								<view class="fontColor">合计：￥{{item.totalPrice}}</view>
							</view>
						</view>
					</view> 
				</view>
			</view>
			   
			 <cashierStaffTemplate :cashierStaffs="cashierStaffs" title="提成员工" @delCashierStaff="delCashierStaff"></cashierStaffTemplate> 
		<view class="bottomli"> 
			<view class="sure btn" @click="showPay">结算</view>
		</view> 
	</view>
</template>

<script>
	import {
		netSelect,
		netContractDetail,
		netPaymentDetail,
		netPaymentNum,
		netEditPaymentInfo
	} from '@/api/kehu.js'
	
	import {
		combineList,
		staffBonusSetting
	} from '@/api/main.js'
	import {
		BASE_URL,
		BASE_IMG_URL
	} from '@/util/api' 
	import {
		OrderBean,
		getMemberDiscountBean,
		goodsClassTreeList,
		goodsList,
		netGetMembercard
	} from '@/api/main.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import { commonF } from '@/common/common'
	import cashierStaffTemplate from '../components/cashierStaffTemplate';
	import AchievePanel from '../components/AchievePanel';
	export default {
		mixins: [commonF],
		data() {
			return {  
				memberCardId: 0,
				memberId: 0,
				consumeRate: 1,
				orderId: '',
				isPaying: false,
				needWaitChooseMember: true,
				member: {},
				memberName: '',
				mobile: '',
				gradeid: '',
				sex: '0',
				photo_id: '',
				photo_url: '',
				birthday: '',
				birthdayType: '0',
				combinId: null,//主卡id
				card_name: '',
				cardData: {
					cardNumber: '',
					consumeRate: '', 
					cardName: '',
					cardArrears: '',
					prj_discount: '',
					prd_discount: '',
					rechargeMap : {
						rechargeSurplus: '',
						giveSurplus: ''
					}
				}, 
				card_number: '',
				cardStartTime: '',
				endDate: '',
				dis_parent1_id: '',
				dis_parent1_name: '',
				category: '',
				source: '1',
				carId: '',
				password: '',
				card_desc: '',
				rechargeAmount: 0,
				giveAmount: 0,
				productCarts: [],
				projectCarts: [],
				isPrintCheck: false,
				isSendsms: false,
				mobile_canrepeat: false,
				needCardNumber: false,
				needMobile: false,
				origMemberCard: false,
				combinIngreGoods: [],
				cashierStaffs: [],
				BASE_IMG_URL:BASE_IMG_URL,
				showAchievePanel: false,
			}
		},
		components:{
			uniIcon,
			uniPopup,
			AchievePanel,
			cashierStaffTemplate
		},
		onLoad(options) {
 
		},
		
		watch: { 
			projectCarts: {
				handler(newv, oldv) {
					var that = this;
					newv.forEach((v, i) => {
						let goods = v; 
						goods.totalPrice = Number(goods.price * goods.count).toFixed(2);
						goods.surplus = goods.count;
						if(goods.surplus == 999) {
							that.$message({
								message: '存在不限次项目'
							  });  
						}
					})
				},
				deep:true
			},
			productCarts: {
				handler(newv, oldv) {
					var that = this;
					newv.forEach((v, i) => {
						let goods = v; 
						goods.totalPrice = Number(goods.price * goods.count).toFixed(2);
						goods.surplus = goods.count;
					})

				},
				deep:true
			},
			cashierStaffs: {
				handler(newv, oldv) {
						var that = this;
				},
				deep:true
			}, 
		},
		async onShow() {
			var that = this;
			let orderInfo = uni.getStorageSync('orderInfo')
			if (orderInfo) {
				this.memberCardId = orderInfo.memberCardId
				this.memberId = orderInfo.memberId 
				this.rechargeAmount = orderInfo.rechargeAmount
				this.cartgoodsNames = orderInfo.cartgoodsNames
				 
			}


			let memberCard = uni.getStorageSync('cashierMemberCard')
			if (memberCard) {
				that.memberCardId = memberCard.id;
				that.memberName = memberCard.memberName;
				that.memberId = memberCard.member_id;
				 netGetMembercard({
				 	memberCardId: that.memberCardId
				 }).then(res => { 
				 	 var cardData = res.data; 
				 	 that.cardData = cardData;
				 	 that.cardType = that.cardData.cardType;
				 	 that.cardData.consumeRate = that.cardData.consumeRate || 1;
				 	 if(that.cardType == 10) {
				 	 	that.cardData = that.cardData.mainCard
				 	 } 
				 	  
				 }) 
			}
			 
			let shoppCart = uni.getStorageSync('shoppCart')
			if (shoppCart) {
				shoppCart.forEach((v, i) => {
					var goods = v;
					this.addCart(goods.id, goods);
				}) 
			}
			 
			this.getDefaultCashierStaffs()
		},
		//监听  页面 卸载
		onUnload() {
				uni.removeStorageSync('orderInfo')
				uni.removeStorageSync('shoppCart')
				uni.removeStorageSync('cashierMemberCard')
				uni.removeStorageSync('__combingoodsId')
				uni.removeStorageSync('cashierStaffs')
		},
		computed: {

			memberCardInfo: function() {
				let that = this
				let info = ""
				if (that.memberName) {
					info += that.memberName
				}
				if (that.cardData && that.cardData.cardName) {
					info += "【"+that.cardData.cardName + '】'
				}
				return info
			},
			orderInfo: function() {
				var that = this;

				var orderInfo = new OrderBean(that.memberId, 4);  
				var orderRecharge = {
					"price": that.rechargeAmount,
					"giveAmount": that.giveAmount,
					"consume": that.rechargeAmount,
					"giveSurplus": that.giveAmount,
					"consumeRate": 1
				}
				var memberCard = {
					"cardId": that.memberCardId,
					"card_name": that.card_name,
					"card_number": that.card_number,
					"startDate": that.cardStartTime,
					"endDate": that.endDate,
					"card_desc": that.card_desc,
					prj_discount: that.prj_discount,
					prd_discount: that.prd_discount,
					"totalPrice": that.totalPrice
				}
				 orderInfo.cardId = that.memberCardId;
 				 orderInfo.memberCard = memberCard;
 				 orderInfo.orderRecharge = orderRecharge;
 				 orderInfo.totalPrice = that.totalPrice;
	 			 orderInfo.cashierStaffs = that.cashierStaffs;
 				 orderInfo.orderStaffRecords = that.orderStaffRecords;
 				 orderInfo.projectCarts = that.projectCarts;
 				 orderInfo.productCarts = that.productCarts;
				return orderInfo;
			},
			cartGoods: function() {
				return this.projectCarts.concat(this.productCarts);
			},
			totalPrice: function() {
				var that = this;
				var tp = 0;
				that.projectCarts.forEach((v, i) => {
					var goods = v;
					tp = tp + Number(goods.totalPrice);
				}) 
				that.productCarts.forEach((v, i) => {
					var goods = v;
					tp = tp + Number(goods.totalPrice);
				})  
				if (that.rechargeAmount) {
					tp = tp + Number(that.rechargeAmount);
				}
				return Number(tp).toFixed(2);
			}
		},
		methods: {
			getStaffBonusSetting: function(data) {
				return staffBonusSetting(data) 
			},  
			togglePopup(type) {
				this.showAchievePanel = false;
			},
			toSetCashierStaff() {
				uni.navigateTo({
					url: '/pagesA/crm/selectStaff/setCashierStaff'
				})
			},
			getCominCard(data) {
				
				return new Promise((resolve, reject) => {
					
					let header={
						'content-type': 'application/x-www-form-urlencoded'
					}
					header['Authori-vipadmin'] = uni.getStorageSync('token');
				        uni.request({
				            url: BASE_URL + 'goods/combineList',
							method: 'GET',
							data: data,
							header: header,
				            success: (res) => {
				                resolve(res.data.data);
				            },
				            fail: (err) => {
				                reject('err')
				            }
				        });
				    })
			},
			 
			changeInfo: function(e) {
				var that = this;
				uni.setStorage({
						key: 'orderInfo',
						data: that.orderInfo,
						success: function() {
						}
				}); 
			},

			changeTime2(e) {
				this.endDate = e.detail.value
			},
			changeTime(e) {
				this.cardStartTime = e.detail.value
			},

			addCart: function(goodsId, goods) {
				var _this = this; 
				var _goods = Object.assign({}, goods)
				_goods.goods_id = goodsId;
				if (_goods.goods_choice_type == 0) {
					var exsited = false;
					_this.productCarts.forEach((v, i) => {
						var old = v;
						if (old.id == _goods.id) {
							old.count = old.count + 1;
							old.surplus = old.surplus + 1;
							exsited = true;
							return false;
						}
					}) 
					if (!exsited) {
						if (true) {
							_goods.price = _goods.store_price;
							_goods.consume = _goods.consume || _goods.store_price;
							_goods.count = _goods.count || 1;
							_goods.manual = 0;
							_goods.surplus = _goods.count;
							_goods.totalPrice = _goods.totalPrice;
							_goods.goodsSpecId = _goods.goodsSpecs_id;
							_goods.goods_type = 7;
						}

						_this.productCarts.push(_goods);
					}
				} else {
					var exsited = false;
					_this.projectCarts.forEach((v, i) => {
						var old = v;
						if (old.id == _goods.id) {
							old.count = old.count + 1;
							old.surplus = old.surplus + 1;
							exsited = true;
						}
					})  
					if (!exsited) {
						var manual = 0;
						if (_goods.manualcost_type == 1) { //百分比手工
							manual = parseFloat(_goods.store_price * _goods.manualcost).toFixed(2)
						} else if (_goods.manualcost_type == 0) {
							manual = _goods.manualcost
						}

						if (true) {
							_goods.price = _goods.store_price;
							_goods.consume = _goods.consume || _goods.store_price;
							_goods.count = _goods.count || 1;
							_goods.surplus = _goods.count;
							_goods.manual = _goods.manual || manual;
							_goods.totalPrice = _goods.totalPrice;
							_goods.projectStaffRecords = [];
							_goods.goods_type = 7;
						}

						_this.projectCarts.push(_goods);
					}
				}

			},
			deleteGoods: function(goodsId) {

				var that = this;
				var newCarts = []; 
				that.projectCarts.forEach((prj, i) => {
					if (goodsId != prj.id) {
						newCarts.push(prj);
					}
				})  
				that.projectCarts = newCarts;
				newCarts = [];
				that.productCarts.forEach((prj, i) => {
					if (goodsId != prj.id) {
						newCarts.push(prj);
					}
				}) 
				that.productCarts = newCarts;
			},
			reducew: function(e, goods) {
				//减
				var $this = $(e.currentTarget);
				var $input = $this.parent().find('.weui-count__number');
				var number = parseInt($input.val() || "0") - 1
				if (number < MIN) number = MIN;

				$input.val(number)
				totalPrice = (number * goods.store_price);
				goods.totalPrice = totalPrice;
				goods.count = number;
				goods.surplus = number;
			},
			plusw: function(e, goods) {
				var $this = $(e.currentTarget);
				var $input = $this.parent().find('.weui-count__number');

				var number = parseInt($input.val() || "0") + 1
				if (number > MAX) number = MAX;
				$input.val(number)

				totalPrice = (number * goods.store_price);
				goods.count = number;
				goods.surplus = number;
				goods.totalPrice = totalPrice;
			},

			showGoods() {
				uni.navigateTo({
					url: '/pagesA/crm/cashier/goods_select?onlyGoods=1&fromtype=4'
				})
			},

			showMemberCards() {
				uni.navigateTo({
					url: '/pagesA/crm/cashier/member_card_list'
				})
			},  
			showPay: function() {
				var that = this;
				if (that.memberId == 0) {
					uni.showToast({
						title: '请选择会员卡',
						icon: 'none'
					})
					return;
				} 
				if (that.cartGoods.length == 0 && that.rechargeAmount <= 0 && that.giveAmount <= 0) {
					uni.showToast({
						title: '请设置储值或添加商品',
						icon: 'none'
					})
					return;
				}

				console.log(that.orderInfo); 
				uni.setStorage({
						key: 'orderInfo',
						data: that.orderInfo,
						success: function() {
							console.log('success');
						}
				});
				 
				uni.navigateTo({
					url: '/pagesA/crm/cashier/payment'
				})

			},
			postSubmitOrder: function() {
				var _this = this;
				window.location.href = ""

			},
			saveFollow() {
				let {
					id,
					number, //回款  编号 
					money, // 回款  金额
					return_time, //  回款  日期
					return_type, // 回款  方式
					remarks, //备注
					info,
					remindPeople
				} = this
				if (!number) {
					uni.showToast({
						title: '请输入回款编号',
						icon: 'none'
					})
					return
				}
				if (!money) {
					uni.showToast({
						title: '请输入回款金额',
						icon: 'none'
					})
					return
				}
				if (!return_time) {
					uni.showToast({
						title: '请选择回款日期',
						icon: 'none'
					})
					return
				}
				if (!return_type) {
					uni.showToast({
						title: '请选择回款方式',
						icon: 'none'
					})
					return
				}
				if (!remindPeople || remindPeople.length == 0) {
					uni.showToast({
						title: '请选择回款审批人',
						icon: 'none'
					})
					return
				}
				let arr = []
				remindPeople.forEach(ele => {
					arr.push(ele.id)
				})
				let flow_staff_id = arr.join(',')
				let params = {
					id,
					number, //回款  编号 
					money, // 回款  金额
					return_time, // 回款  日期
					return_type, // 回款  方式
					remarks,
					flow_staff_ids: flow_staff_id,
					customer_id: this.info.customer.id,
					contract_id: this.info.contract.id
				}
				console.log(params, '参数')
				netEditPaymentInfo(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.bottomli {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
		border-top: 1rpx solid #EAEAEA;
	
		.btn {
			width: 300rpx;
			height: 80rpx;
			font-size: 24rpx;
			color: #666666;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
		}
	
		.sure {
			background: #03aa96;
			color: #fff;
		}
	
		.remove {
			border: 1rpx solid #03aa96;
			color: #03aa96;
			line-height: 78rpx;
		}
	}
	
	.new_fllow {
		margin-top: 40rpx;
		font-size: 28rpx;

		.fllow_form {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			padding: 0 24rpx;

			.form_right {
				display: flex;
				color: #999;

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 28rpx 5rpx 0 0;
				}
			}

			text {
				color: #f00;
				margin-left: 10rpx;
			}

			.form_input {
				input {
					height: 92%;
					// line-height: 100rpx;
					text-align: right;
					margin-right: 10rpx;
				}
			}

			.fllow_button {
				margin-top: 15rpx;
			}
		}

		.fllow_file_li {
			padding: 24rpx 34rpx;
			background: #fff;
			border-bottom: 1rpx solid #EAEAEA;

			.fil_li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14rpx;

				.fileimg {
					width: 20rpx;
					height: 20rpx;
				}

				.filename {
					font-size: 24rpx;
					color: #999999;
				}

				.closeimg {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.imglist {
			padding: 24rpx 34rpx;
			background: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.imgbox {
				width: 160rpx;
				height: 160rpx;
				margin-right: 14rpx;
				position: relative;
				margin-bottom: 24rpx;
				border: 1rpx solid #EAEAEA;

				.delimg {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					position: absolute;
					right: -16rpx;
					top: -16rpx;
					background: rgba(0, 0, 0, 0.5);
					z-index: 2;
				}

				.selfimg {
					width: 160rpx;
					height: 160rpx;
				}
			}
		}

		.fllow_area {
			background-color: #fff;
			// padding: 0 70rpx;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			color: #999;

			.area_head {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				padding: 0 70rpx;

				text {
					color: #f00;
				}
			}

			textarea {
				width: 80%;
				height: 300rpx;
				padding: 30rpx;
				background: #f8f8f8;
				margin: 0 auto;
			}
		}

		.info_head {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			color: #999;
			padding-left: 24rpx;
		}

		.affiliation {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding-bottom: 40rpx;

			.aff_head {
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 30rpx;

				text {
					color: #f00;
					margin-left: 10rpx;
				}
			}

			.aff_con {
				display: flex;
				text-align: center;
				flex-wrap: wrap;

				.aff_item {
					width: 100rpx;
					margin-right: 15rpx;
					border-radius: 50%;
					margin-bottom: 15rpx;

					image {
						margin-bottom: 15rpx;
						width: 60rpx;
						height: 60rpx;

					}
				}

				.affbox {
					position: relative;

					.delremind {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						position: absolute;
						right: -16rpx;
						top: -16rpx;
						background: rgba(0, 0, 0, 0.5);
						z-index: 2;
					}
				}

				.aff_last {
					image {
						margin-bottom: 15rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.follow_task {
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	#btn {
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		width: 500rpx;
		height: 88rpx;
		background: #03AA96;
		border-radius: 29rpx;
		margin: 30rpx auto;
	}
	
	
	.fllow_item {
		position: relative;
		.unread{
			width:10rpx;
			height:10rpx;
			border-radius: 50%;
			position: absolute;
			right:5rpx;
			top:5rpx;
			background:#F43F3B;
		}
		.item_data {
			margin: 30rpx 0;
	
			&::before {
				content: '';
				display: inline-block;
				margin: 0 15rpx 0 24rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				border: 2rpx solid #03aa96;
			}
		}
	
		.item_content {
			display: block;
			background-color: #fff;
			padding: 24rpx 24rpx; 
			border-radius: 10rpx;
			margin-bottom: 30rpx;
	
			.con_img {
				display: flex;
				.main_first {
					margin-bottom: 25rpx;
					padding-left: 25rpx;
					flex: 1;
					.main_time{
						line-height: 25px;
					}
					.main_title{
						display: flex;
						width: 100%;
						justify-content: space-between;
						.first_left {
							display: flex;
						
							:first-child {
								font-size: 32rpx;
								margin-right: 10rpx;
								margin-top: -3rpx;
							}
						
							:last-child {
								margin-top: 2rpx;
							}
						}
						.main_type{
							padding:5rpx 20rpx;
							border-radius: 10rpx;
							color:#fff;
						}
						.daofang{
							background:#03aa96;
						}
						.genjin{
							background:#ff7800;
						}
						.other{
							background:#1CBBB4;
						}
					}
					
				}
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
	
			.con_main {
				flex: 1;
				.main_second{
					padding-bottom:20rpx;
				}
				
				.main_img{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 20rpx;
					.imgbox{
						padding: 10rpx;
						border-radius: 5rpx;
						border:1rpx solid #CCCCCC;
						width:160rpx;
						height:160rpx;
						margin-right:14rpx;
						margin-bottom:14rpx;
					}
				}
				.main_third {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 20rpx 0 10rpx;
	
					.third_left {
						display: flex;
						align-items: center;
						.icon-clock{
							font-size:32rpx;
						}
						.lxs_time{
							margin-left: 5px;
							font-size:26rpx;
						}
					}
					.third_right {
						display: flex;
						.right_num {
							display: flex;
							:last-child {
								margin-right: 20rpx;
							}
						}
	
						.icon-arrows_right {
							margin-top: -4rpx;
						}
					}
				}
	
				.main_fourth {
					padding-bottom: 10rpx;
				}
			}
		}
	}
</style>
